<template>
  <div class="l-echart-scatter"
       :style="styleSizeName"
       @click="handleClick">
    <div :ref="id"
         :style="styleChartName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default { //散点图
    mixins:[init],
    computed: {
        x2 () {
            return this.option.gridX2 || 20;
        }
    },
    data() {
        return {
            dataHandle: []
        }
    },
    methods: {
        updateChart () {
            const optionData = this.$deepClone(this.dataChart);
            this.dataHandle = optionData || []
            if (this.dataType === 2) {
                const data = []
                optionData.map(t=>{
                    data.push([t[this.labelKey], t[this.valueKey]])
                })
                this.dataHandle = [{'data': data}]
            }
            const option = {
                title: this.ishasprop(this.option.titleShow, {
                text: this.option.title,
                subtext: this.option.subtext || '',
                textStyle: {
                    color: this.option.titleColor || '#333',
                    fontSize: this.option.titleFontSize || 16
                },
                left: this.option.titlePostion || 'auto',
                subtextStyle: {
                    color: this.option.subTitleColor || '#aaa',
                    fontSize: this.option.subTitleFontSize || 14
                }
                }, {}),
                tooltip: {
                formatter: this.option.formatter || '',
                backgroundColor: this.option.tipBackgroundColor || 'rgba(50,50,50,0.7)',
                borderWidth: '0',
                textStyle: {
                    fontSize: this.option.tipFontSize,
                    color: this.option.tipColor || "#fff"
                }
                },
                grid: {
                left: this.option.gridX || 20,
                top: this.option.gridY || 60,
                right: this.x2,
                bottom: this.option.gridY2 || 60
                },
                xAxis: {
                splitLine: {
                    lineStyle: {
                    type: 'dashed'
                    }
                }
                },
                yAxis: {
                splitLine: {
                    lineStyle: {
                    type: 'dashed'
                    }
                }
                },
                series: (() => {
                // const barColor = this.option.barColor || [];
                const list = (this.dataHandle || []).map((ele, index) => {
                    return Object.assign(ele, {
                    type: "scatter",
                    itemStyle: {
                        color: this.getColor(index)
                    },
                    label: {
                        show: this.$vaildData(this.option.labelShow, false), //开启显示
                        position: "top",
                        textStyle: {
                        fontSize: this.option.labelShowFontSize || 14,
                        color: this.option.labelShowColor || "#333",
                        fontWeight: this.option.labelShowFontWeight || 500,
                        },
                        formatter: this.labelFormatter ? name => this.getLabelFormatter(name) : '{c}',
                    }
                    });
                });
                return list;
                })()
            };
            this.myChart.resize();
            this.myChart.setOption(option, true);
        },
        handleClick() {
            this.clickFormatter && this.clickFormatter({
                data: this.dataHandle
            }, this.getItemRefs());
        },
    }
};
</script>

